import React, { Component, Suspense } from 'react'
import AdminLayout from '@/components/AdminLayout'
import { Route, Switch, Redirect } from 'react-router-dom'
import routes from '@routes'
import { Spin } from 'antd'
import NoPermission from '@pages/NoPermission'
export default class Admin extends Component {
  state = {
    userInfo: localStorage.getItem('userInfo')
      ?
      JSON.parse(localStorage.getItem('userInfo'))
      :
      {}
  }
  render() {
    return (
      <div>
        <AdminLayout>
          <Switch>
            <Suspense fallback={<Spin size="large"/>}>
              {
                routes.map(route => {
                  return (
                    <Route
                      key={route.path}
                      path={route.path}
                      render={(routeProps) => {
                        if (route.roles.includes(this.state.userInfo.role)) {
                          return <route.component {...routeProps} />
                        } else {
                          return <Redirect to="/admin/nopermission" />
                        }
                      }}
                    />
                  )
                })
              }
              <Route path="/admin/nopermission" component={
                NoPermission
              } />
              <Redirect to="/admin/dashBoard" from="/admin" exact />
            </Suspense>
          </Switch>
        </AdminLayout>
      </div>
    )
  }
}
